<template>
  <view class="comment_conp">
    <view class="comment" v-for="(res, index) in commentList" :key="res.id">
      <view class="left"><image :src="res.user?.avatar" mode="aspectFill"></image></view>

      <view class="right">
        <view class="top">
          <view class="name">{{ res.user.username }}</view>
          <!-- <view class="like" :class="{ highlight: res.isLike }">
						<view class="num">{{ res.likeNum }}</view>
						<u-icon v-if="!res.isLike" name="thumb-up" :size="30" color="#9a9a9a" @click="getLike(index)"></u-icon>
						<u-icon v-if="res.isLike" name="thumb-up-fill" :size="30" @click="getLike(index)"></u-icon>
					</view> -->
        </view>
        <view class="content">{{ res.content }}</view>
        <view class="reply-box">
          <view class="item" v-for="(item, index) in res.replyList" :key="index">
            <view class="username">
              <text>{{ item.user.username }}</text>
              <text v-if="item.toUser"><text class="text">回复</text>{{ item.toUser.username || '' }}</text>
            </view>
            <view class="text">{{ item.content }}</view>
          </view>
          <!-- <view class="all-reply" @tap="toAllReply" v-if="res.replyList != undefined">
						共{{ res.count }}条回复
						<u-icon class="more" name="arrow-right" :size="26"></u-icon>
					</view> -->
        </view>
        <view class="bottom">
          {{ res.updateDate }}
          <view class="reply" @click="onReply(res)">回复</view>
        </view>
      </view>
      <u-icon @click="onDelComment(res.id)" v-if="userInfo.id == res.user?.id" name="trash" color="#e3742e" size="36"></u-icon>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { userStore } from '@/store/user'
  import type { TComment } from '@/types/blog'
  import { onLoad } from '@dcloudio/uni-app'
  import { storeToRefs } from 'pinia'
  import { ref, toRefs } from 'vue'

  type TProps = {
    commentList: TComment[]
  }
  const props = withDefaults(defineProps<TProps>(), {
    commentList: () => [],
  })
  const emit = defineEmits(['reply', 'delComment'])
  const uStore = userStore()
  const { userInfo } = storeToRefs(uStore)
  const { commentList } = toRefs(props)

  onLoad(() => {
    getComment()
  })
  // 跳转到全部回复
  const toAllReply = () => {
    uni.navigateTo({
      url: '/pages/template/comment/reply',
    })
  }
  // 点赞
  const getLike = (index: number) => {
    // commentList.value[index].isLike = !commentList.value[index].isLike;
    // if (commentList.value[index].isLike == true) {
    //     commentList.value[index].likeNum++;
    // } else {
    //     commentList.value[index].likeNum--;
    // }
  }
  // 删除
  const onDelComment = (id: number) => {
    emit('delComment', id)
  }
  // 评论列表
  const getComment = () => {}

  // 回复
  const onReply = (res: any) => {
    emit('reply', res)
  }
</script>

<style lang="scss" scoped>
  .comment_conp {
    padding-bottom: 120rpx;
  }
  .comment {
    display: flex;
    padding: 30rpx;
    align-items: flex-start;
    .left {
      image {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        background-color: #f2f2f2;
      }
    }
    .right {
      flex: 1;
      padding-left: 20rpx;
      font-size: 30rpx;
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
        .name {
          color: #5677fc;
        }
        .like {
          display: flex;
          align-items: center;
          color: #9a9a9a;
          font-size: 26rpx;
          .num {
            margin-right: 4rpx;
            color: #9a9a9a;
          }
        }
        .highlight {
          color: #5677fc;
          .num {
            color: #5677fc;
          }
        }
      }
      .content {
        margin-bottom: 10rpx;
      }
      .reply-box {
        background-color: rgb(242, 242, 242);
        border-radius: 12rpx;
        .item {
          padding: 20rpx;
          border-bottom: solid 2rpx $u-border-color;
          .username {
            font-size: 24rpx;
            color: #999999;
            .text {
              font-size: 28rpx;
              margin: 0 6rpx;
              color: #5677fc;
            }
          }
        }
        .all-reply {
          padding: 20rpx;
          display: flex;
          color: #5677fc;
          align-items: center;
          .more {
            margin-left: 6rpx;
          }
        }
      }
      .bottom {
        margin-top: 20rpx;
        display: flex;
        font-size: 24rpx;
        color: #9a9a9a;
        .reply {
          color: #5677fc;
          margin-left: 10rpx;
        }
      }
    }
  }
</style>
